<template>
	<div class="wrap login">
		<img class="logo" src="./../../assets/img/logo.jpg">
		<div class="from ex-rigster-form">
			<div class="ex-rigster-from-item">
				<span>账号</span>
				<input type="tel" v-model.trim="phone" placeholder="请输入手机号码" maxlength="11">
			</div>
			<div class="ex-rigster-from-item">
				<span>密码</span>
				<input type="password" v-model.trim="password" placeholder="请输入6-16位密码" maxlength="16">
			</div>
			<!-- <div class="code-input ex-rigster-from-item">
				<span>验证码</span>
				<input class="inputCode" v-model.trim="iscodeTest" maxlength="4" @keyup.enter="login" type="tel" placeholder="请输入验证码">
				<div class="code" @click="codeImg"><img :src="iscodeImg"></div>
			</div> -->
			<input class="l_button" type="button" value="登录" :disabled="disableBtn" @click = "login()">
		</div>
		<div class="l_text">
			<span class="left"><router-link :to="{path:'revisePassword',query: {type:1}}">忘记密码</router-link></span>
			<!-- <span class="right"><router-link to="/register">立即注册</router-link></span> -->
		</div>
	</div>
</template>
<script>
	export default {
		data(){
			return {
				phone:'',   //用户名15018836251
				password:'',    //密码y123456
				// iscodeImg:'',   //验证码图片
				// iscodeTest: '',   //验证码
				disableBtn: false,    //防止重复提交
			}
		},
        mounted(){
            this.codeImg(); //拉取图片验证码
        },
        methods:{
        	//图片验证码
        	codeImg(){
        		// this.iscodeImg = this.Tools.config.bathUrl+'login/verify.do?_t='+this.Tools.randomString(8)
            },
			//登录
			login(){
				let _this = this;
				if(!this.Tools.regCombination.null.test(_this.phone)){
					this.$toast({message: '请输入手机号', position: 'bottom',duration: 1500})
				}else if(!this.Tools.regCombination.phone.test(_this.phone)){
					this.$toast({message: '请输入正确的手机号', position: 'bottom'})
				}else if(!this.Tools.regCombination.null.test(_this.password)){
					this.$toast({message: '请输入密码', position: 'bottom'})
				}else if(this.password.length < 6){
					this.$toast({message: '密码长度不能小于六位', position: 'bottom'})
				}else{
                	this.loginIn();
                }
			},
			loginIn(){
				let _this = this;
				this.disableBtn = true;
				this.Tools.AXIOS({
					url:'passport/login',
					transformRequest:{
						moble: this.phone,
						login_pwd: this.password,
					},
					success: function(res){
						window.localStorage.setItem('token',res.data.data.token);
						window.localStorage.setItem('user_id',res.data.data.user_id);
						window.localStorage.setItem('nick',res.data.data.nick);
						_this.disableBtn = false;
						_this.$router.push('/mall');
					},
					error(res){
						_this.disableBtn = false;
					}
				})
			},
		},
		components:{
		}
	}
</script>
<style scoped>
.wrap{width: 100%; position: absolute; height: 100%; background: #fff;}
.login .logo{ width: 35%; display: block; margin: 15.8% auto 5%;}
.login .from{ padding: .5rem 1.2rem .5rem; margin: 0 auto; color: #6F6F6F;}
.login .from .ex-rigster-from-item{ padding: .5rem 0; border-bottom: 1px solid #EDEDED; position: relative;}
.login .from .ex-rigster-from-item span{ font-size: .35rem;}
.login .from .ex-rigster-from-item input{ width: 80%; position: absolute; left: 1.5rem; font-size: .35rem;}
.login .from .l_button{ width: 100%; margin: 10% auto 0; padding: .3rem 0; background: #00990B; text-align: center; font-size: .4rem; color: #fff; border-radius: 100px;}
.login .from .code-input{ position: relative;}
.login .from .code-input .code{ width: 2rem; position: absolute; right: 0; z-index: 10; top: .7rem;}
.login .from .code-input .code img{ width: 100%;}
.login .l_text{ width: 72%; margin: 1% auto 0; font-size: .35rem;}
.login .l_text a{ color: #afbdb0;}
</style>


